<template>
  <div class="page">
    <el-table
      highlight-current-row
      v-loading="loading"
      :data="dayList"
      border
      stripe
      style="width: 100%">
      <el-table-column
        prop="days"
        label="天数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        width="150"
        label="类型">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type === 1 ? 'success' : 'warning'" v-html="getRealTitle(scope.row.type)"></el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="道具/道具包名称">
      </el-table-column>
      <el-table-column
        prop="number"
        width="120"
        label="数量">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" round @click="handleAlter(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="编辑签到"
      width="50%"
      :visible.sync="dialogVisible">

      <el-form ref="signIn" :model="signInForm" :rules="signInRules" label-width="160px">
        <el-form-item label="签到对象ID">
          <el-input v-model="signInForm.id" readonly></el-input>
        </el-form-item>
        <el-form-item label="签到天数">
          <el-input v-model="signInForm.days" readonly></el-input>
        </el-form-item>
        <el-form-item label="道具 or 道具包">
          <el-radio v-model="signInForm.type" :label="1" border>道具包</el-radio>
          <el-radio v-model="signInForm.type" :label="2" border>道具</el-radio>
        </el-form-item>
        <el-form-item label="道具 or 道具包名称">
          <el-select filterable v-if="signInForm.type === 1" v-model="signInForm.prop_id" placeholder="道具 or 道具包选择">
            <el-option
              v-for="item in reward_list"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select filterable v-else v-model="signInForm.prop_id" placeholder="道具 or 道具包选择">
            <el-option
              v-for="item in reward_item_list"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model.number="signInForm.number" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button @click="handleSubmit" type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {getGiftSignInList, toSigninSave} from "@/api/gift/gift";

export default {
  name: "giftSignIn",
  data() {
    // 自定义校验器， 校验道具数量是否合法
    const checkNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('数量不能为空'));
      } else if (value < 0) {
        return callback(new Error('数量不能为负数'));
      }
      callback()
    };
    return {
      dayList: [],
      reward_item_list: [],   // 道具列表
      reward_list: [],        // 道具包列表
      loading: true,          // loading 开关
      dialogVisible: false,   // 模态框开关
      signInForm: {
        id: Symbol('签到天数对象id'),
        days: Symbol('天数'),
        type: Symbol('道具 or 道具包'),
        prop_id: Symbol('道具 or 道具包 id'),
        number: Symbol('数量')
      },
      signInRules: {
        number: [
          {validator: checkNumber, trigger: 'change'}
        ]
      }
    }
  },
  mounted() {
    this.refreshList()
  },
  methods: {
    async refreshList() {
      const {data} = await getGiftSignInList()
      this.dayList = data.list
      this.reward_item_list = data.reward_item_list
      this.reward_list = data.reward_list
      this.loading = false
    },
    getRealTitle(value) {
      if (value === 1) {
        return '道具包'
      } else {
        return '道具'
      }
    },
    handleAlter(row) {
      this.signInForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleCancel() {
      this.$refs['signIn'].resetFields()
      this.dialogVisible = false
    },
    async handleSubmit() {
      try {
        const {code} = await toSigninSave(this.signInForm)
        if (code === 200) this.$message.success('修改成功！')
      } catch (e) {
        this.$message.error("提交发生错误！")
      }
      this.dialogVisible = false
      await this.refreshList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "style";
</style>
